<template>
	<view class="content confirmLend">
		<topBar title="出借确认" name="tit"></topBar>
		<view class="cardsBlock topCards">
			<view class="title">
				{{objName}}
			</view>
			<view class="info">
				<view class="top">
					<view class="tit"> 出借金额 </view>
					<view>￥ <text class="price">{{amount}}</text></view>
				</view>
				<view><text>账户余额：</text> {{userInfo.balance}} </view>
			</view>
			<!-- <view class="bot">
				历史参考收益 <text class="pir">{{profit}}</text> 元（不代表未来收益）
			</view> -->
		</view>
		<radio-group class="block" @change="RadioChange">
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="0" class="redioCk" checked /> 余额支付
				</view>
				<view>
					{{amount}}元
				</view>
			</view>
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="1" class="redioCk" /> 支付宝支付
				</view>
				<view>
					{{amount}}元
				</view>
			</view>
			<view class="cardsBlock balance">
				<view class="payType">
					<radio value="2" class="redioCk" /> 银行卡支付
				</view>
				<view>
					{{amount}}元
				</view>
			</view>
		</radio-group>

		<view class="labTitle">
			<label class="radio cl-main" @tap="redioHandle">
				<radio value="r2" class="redioCk" />我同意</label>
			<a href="" style='text-decoration:none;'>《用户服务协议》</a>&nbsp;
			<a href="" style='text-decoration:none;'>《风险提示》</a>
		</view>
		<view class="itBut">
			<ButtonItems :type="submitBut" @click="showModal" size="14" value="确认出借"></ButtonItems>
		</view>

		<view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">输入交易密码</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="content">
						<view class="">
							{{time.min || '00'}}:
							{{time.sec || '00'}}
							关闭订单
						</view>
					</view>
				</view>
				<view class="info">
					<br />
					<label class="radio cl-main">支付密码：</label>
					<input type="password" v-model="payPassword" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @click="submitHandle">确定</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import topBar from '../../components/TopBar.vue'
	import ButtonItems from '../../components/ButtonItems.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				submitOpen: false,
				userInfo: {},
				radio: '0',
				modalName: '',
				payPassword: '',
				Loan: {},
				no: '',
				time: {},
				start_time: String
			}
		},
		computed: {
			...mapState(['lendInfo']),
			amount() {
				return this.$route.query.amount
			},
			objName() {
				return this.$route.query.objName
			},
			submitBut() {
				return this.submitOpen ? 'big-blue' : 'big-gray'
			}
		},
		components: {
			topBar,
			ButtonItems
		},
		onLoad() {
			this.getInterface()
		},
		methods: {
			getInterface() {
				this.request({
					url: 'user/getUserInfo',
				}).then(res => {
					this.userInfo = res.data.result

					var orderCode = '';
					for (var i = 0; i < 6; i++) //6位随机数，用以加在时间戳后面。
					{
						orderCode += Math.floor(Math.random() * 10);
					}
					orderCode = new Date().getTime() + orderCode; //时间戳，用来生成订单号。
					this.no = orderCode
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					});
				})
			},
			redioHandle() {
				this.submitOpen = true
			},
			showModal() {
				this.request({
					url: 'bidding/lend/addLoan',
					method: 'POST',
					params: {
						borrowId: this.$route.query.id,
						loanMoney: this.amount,
						status: 0,
						type: this.radio,
						no: this.no
					}
				}).then(res => {
					if (res.data.code == 0) {
						this.Loan = res.data.result
						this.start_time = this.Loan.createTime
						this.countDown()
						if (this.radio == 0 && this.submitOpen == true && this.Loan.status==0) {
							this.modalName = 'DialogModal'
						}
					}
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.data.msg
					});
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			countDown() {
				var interval = setInterval(() => {
					// 当前时间
					let nowTime = new Date().getTime();
					let endTime = new Date(this.start_time).getTime() + 5 * 60 * 1000;
					let startTime = new Date(this.start_time).getTime();
					// 已开始
					if (startTime - nowTime <= 0) {
						if (endTime - nowTime <= 0) {
							clearInterval(interval)
							this.modalName = ''
							uni.showToast({
								icon: 'none',
								title: '订单过期未支付已关闭，请重新下单'
							});
						} else {
							let time = (endTime - nowTime) / 1000;
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							this.time = {
								min: this.timeFormat(min),
								sec: this.timeFormat(sec)
							}
						}
					} 
				}, 1000)
			},
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			submitHandle() {
				this.Loan.user.payPassword = this.payPassword
				if (this.userInfo.balance < this.amount) {
					uni.showToast({
						icon: 'none',
						title: '余额不足，请充值后再试！',
					});
					return false;
				}
				this.request({
					url: 'bidding/lend/pay',
					method: 'POST',
					params: {
						id: this.Loan.id,
						no: this.Loan.no,
						userId: this.Loan.userId,
						borrowId: this.Loan.borrowId,
						loanMoney: this.Loan.loanMoney,
						profit: this.Loan.profit,
						retrieveMoney: this.Loan.retrieveMoney,
						total: this.Loan.total,
						annualProfit: this.Loan.annualProfit,
						isLoanReward: this.Loan.isLoanReward,
						loanRewardType: this.Loan.loanRewardType,
						loanReward: this.Loan.loanReward,
						status: this.Loan.status,
						serviceFeeId: this.Loan.serviceFeeId,
						createTime: this.Loan.createTime,
						type: this.Loan.type,
						user: this.Loan.user,
						borrow: this.Loan.borrow
					}
				}).then(res => {
					uni.setStorage({
						key: 'lendDataInfo',
						data: this.Loan,
						success() {
							uni.navigateTo({
								url: '/pages/lend/lendSuccess'
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.data.msg,
					});
				})

			}
		}
	}
</script>
<style>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
</style>
<style lang="scss">
	.confirmLend {
		font-size: 28upx;

		.topCards {
			margin-top: 40upx;
			padding: 0;

			.title,
			.bot {
				padding: 0 30upx;
				font-size: 28upx;
				line-height: 3;
				border-bottom: solid 1px $uni-border-color;
			}

			.bot {
				padding: 0 30upx;
				font-size: 28upx;
				line-height: 3;
				border: none;
				border-top: solid 1px $uni-border-color;
			}

			.info {
				padding: 30upx;
				display: flex;
				justify-content: space-between;

				.top {
					.tit {
						margin-bottom: 20upx;
					}
				}

				.price {
					font-size: 50upx;
				}
			}
		}

		.balance {
			display: flex;
			justify-content: space-between;
		}

		.labTitle {
			margin-top: 30upx;
			font-size: 24upx;
			margin: 5px 20px 0px 20px;
			color: $uni-text-color-grey;
		}

		.itBut {
			margin: 20upx auto;
			width: 86%;
		}

		.redioCk {
			position: relative;
			top: -4upx;
			transform: scale(0.6);
		}
	}
</style>
